<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            font-size: 12px;
        }

        h2.special {
            color: blue;
        }
    </style>
</head>

<body>
    <div>
        <p title="imP" id="titleOne">元素和节点</p>
        <p>p标签为元素节点,title=imP为属性节点，元素和节点 这句话为文本节点</p>


        <div id="pp">获取dom元素</div>
        <h2 class="item special">special</h2>
        <h2 class="item no-special">no-special</h2>
        <p>xx.xx 样式：利用class属性为一种特定类型的元素定义一种特定的样式</p>
        <!-- 去百度了 -->
        <a href="https://www.baidu.com" onclick="goBaidu(this)">点我吧1</a>
        <!-- 不去百度 -->
        <a href="https://www.baidu.com" onclick="return false;">点我吧2</a>

        <script>
            console.log(typeof document.getElementById("pp")) //object , 说明通过dom方法获取到的dom元素，是个对象
            console.log("事实上，文档中的每一个元素，都是一个对象");
            console.log(document.getElementsByTagName("*"));
            console.log(document.getElementsByClassName("item"))
            console.log(document.getElementsByClassName("item special"))


            // 获取属性
            let titleOne = document.getElementById("titleOne")
            console.log(titleOne.getAttribute('title')) //imP
            console.log(titleOne.getAttribute('width')) //如果没有这个属性，则返回null

            titleOne.setAttribute('title', 'titleTwo')
            titleOne.setAttribute('title2', 'titleTwo') // 如果有这个属性，则修改这个属性值。如果没有这个属性，则先创建，再赋值

            // 事件返回true或者false


            // childNodes属性：获取任何一个元素的所有子元素
            var body = document.getElementsByTagName('body')[0]
            console.log(body);
            console.log(body.childNodes);



        </script>
    </div>
</body>

</html>